<template>
  <div class="home-box">
    <el-container>
      <el-aside><aside-box /></el-aside>
      <el-container>
        <el-header><header-box /></el-header>
        <el-main><main-box /> </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import AsideBox from '@/components/page/AsideBox.vue'
import HeaderBox from '@/components/page/HeaderBox.vue'
import MainBox from '@/components/page/MainBox.vue'
</script>

<style scoped lang="scss">
.home-box {
  width: 100%;
  height: 100%;

  .el-container {
    height: 100%;

    .el-aside {
      background-color: #4b4b4b;
      width: 200px;
    }

    .el-container {
      .el-header {
        background-color: white;
        height: 40px;
        padding: 0;
      }
      .el-main {
        background-color: #e2e0e0;
        padding: 0;
      }
    }
  }
}
</style>
